<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="author" content="彭俊超">
    <title>订单</title>
    <style>
        ul{
            list-style: none;
            padding:0px;
            margin:0px;
        }
        ul li{
            border:solid 1px orange;
            line-height:30px;
            padding:0px 55px;
            visibility:hidden;
        }
        div{
            width:400px;
            height:300px;
            box-shadow: 0 0 2px green;
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            margin:30px auto;
            text-align: center;
        }
        p{  
            margin:0px;
            width:100px;
            height:30px;
            line-height:30px;
            text-align: center;
            border:solid red 1px;
        }
        span{
            background-color:coral;
        }
    </style>
</head>

<body>
<div>
    <ul class="one">
        <span>销售订单</span>
        <li>订单1</li>
        <li>订单2</li>
        <li>订单3</li>
    </ul>
        <ul class="two">
            <span>消费订单</span>
            <li>消费1</li>
            <li>消费2</li>
            <li>消费3</li>
        </ul>
        <p></p>
</div>

<script src="./jquery.js">
    
</script>
</body>

</html>
<script>
    $('ul span').click(function(){
        $(this).siblings().css('visibility','visible');
        $(this).parent().siblings().children('li').css('visibility','hidden');
    })

    $('ul li').mouseover(function(){
        $(this).css('background-color','#ccc').siblings().css('background-color','white');
    })

    $('ul li').click(function(){
        $('p').html(this.innerHTML);
        $('ul li').css('visibility','hidden');
    })
</script>